<template>
  <div class="container">
    <el-menu class="el-menu-vertical-demo" background-color="#9b8bba" text-color="#fff" active-text-color="#409EFF">
      <div class="head-portrait">
        <img src="../imgs/timo.jpg" />
      </div>
      <span class="title">电商ERP</span>
      <!-- <router-link> -->
        <el-menu-item index="1" v-on:click="location.href = 'index.html'">
          <i class="el-icon-location"></i>
          <span slot="title">主页</span>
        </el-menu-item>
      <!-- </router-link> -->

      <!-- <router-link> -->
        <el-menu-item index="2" @click='location.href = "spgl.html"'>
          <i class="el-icon-menu"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
      <!-- </router-link> -->


      <el-menu-item index="3" >
        <i class="el-icon-document"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>

      <el-menu-item index="4" >
        <i class="fa fa-money"></i> &nbsp;
        <span slot="title">财务管理</span>
      </el-menu-item>

      <el-menu-item index="5" >
        <i class="fa fa-bar-chart"></i>&nbsp;
        <span slot="title">数据分析</span>
      </el-menu-item>

      <el-menu-item index="6">
        <i class="el-icon-setting"></i>
        <span slot="title">系统设置</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {

    }
  },
  methods: {
    handleTo() {

    }
  }
};
</script>

<style scoped>
.router-link-exact-active {
  background-color: #da1111;
}

.head-portrait {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px auto;
  border-radius: 50%;
}

.container {
  /* border: 1px solid red; */
  width: 15%;
  height: 100%;
  position: absolute;
  background-color:#9b8bba;
  opacity: 1;
  color: whitesmoke;
  left: 0%;
  top: 0%;
}

i {
  font-size: 20px;
  color: white;
}

.el-menu-item * {
  vertical-align: middle;
  font-size: 18px;
}

.head-portrait img {
  position: relative;
  width: 100px;
  height: auto;
  margin: auto;
  border-radius: 50%;

}

.title {
  margin-left: 35%;
}
</style>